<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="sie-edge" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login.css">
<title>登录注册页面</title>
</head>
<script type="text/javascript">
  $(document).ready(function() {
    var btn = document.getElementById("btn");

    var _input = document.getElementById("tj");

    btn.onclick = function () {
      _input.onclick();
    };
  });
  /*用户名重复性校验*/
  function unameValid() {
    var rusrrname = $("#rusername").val();
    $.ajax({
      type:"POST",
      url: "${pageContext.request.contextPath}/user/unrepeat?username="+rusrrname,
      dataType: "text",
      timeout: 1500,
      success: function (data) {
        if(data =="1"){
          $("#usernamespan").text("用户名已存在，请重新输入");
          $("#rusername").prop("value","");
        }else{
          $("#usernamespan").text("用户名可以使用");
        }
      }

    });
  }
</script>
<body>

<div class="container" id="container">
  <div class="form-container sign-up-container">
    <form action="<c:url value="/user/regist" />" method="post" onsubmit="return validate()">
      <h2>完成注册,加入我们</h2><br />
      <input type="text" name="username" id="rusername" placeholder="用户名" onchange="unameValid()" maxlength="20" minlength="3" required = "required">
      <span id="usernamespan"></span>
      <input type="password" name="password" id="rpassword" placeholder="密码" required = "required" />
      <span id="passwordspan"></span>
      <input type="password" id="checkpsw" placeholder="确认密码" required = "required"/>
      <span id="checkpswspan"></span>
      <input type="text" required="required" name="phone"  id="phone" placeholder="电话号码" maxlength="11"/>
      <input type="submit" id="sub" value="注册" />
    </form>
  </div>
  <div class="form-container sign-in-container">
    <form action="<c:url value="/user/login" />" method="post" name = "login">

      <h1>畅读小说网</h1><br />
      <span style="font-size: 18px">用户名登录</span><br />
      <h2 style="color: white;">
      <c:choose>
        <c:when test="${mess ne null }">${mess }</c:when>
        <c:otherwise></c:otherwise>
      </c:choose>
        </h2>
      <input type="username" name="username" placeholder="用户名" id = "username" required >
      <input type="password" name="password" placeholder="密码" id = "password" required>
      <input type="submit" style="display: none;" id="tj" />
      <button id = "btn">登录</button>
      <div id =forgetPwd>
        <a href="${pageContext.request.contextPath}/user/forget1" >忘记密码?</a>
      </div>
    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>欢迎回来</h1>
        <p>与我们保持联系请登录您的个人信息</p>
        <button class="ghost" id="signIn">登录</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>欢迎光临</h1>
        <p>输入您的个人资料，并与我们一起开始旅程</p>
        <button class="ghost" id="signUp">注册</button>
      </div>
    </div>
  </div>
</div>

<script  src="${pageContext.request.contextPath}/static/js/login.js" type="text/javascript"></script>
<script  src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script  src="${pageContext.request.contextPath}/static/js/regist.js" type="text/javascript"></script>
<script type="text/javascript">
  if(top.location != this.location){
    top.location.replace('${pageContext.request.contextPath}/loginAndRegist.jsp');
  }
</script>
</body>
</html>
